<script setup>
	import {
		onShow,
		onShareAppMessage,
		onBackPress
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from "vue";
	const CustomNavbarRef = ref(null);
	const CustomNavbarHeight = ref(0);
	/**
	 * @description vue生命周期钩子
	 */
	onMounted(() => {
		CustomNavbarRef.value.setCustomNavbarHeight();
		CustomNavbarHeight.value = CustomNavbarRef.value.CustomNavbarHeight;
	});

	/**
	 * @description 变量
	 */
	const data = reactive({});

	onShow(() => {
		try {
			// 核心：调用 UniApp 跨端 API
			const systemInfo = uni.getSystemInfoSync();

			// 提取常用设备信息（按需扩展）
			const deviceInfo = {
				// 基础信息
				platform: systemInfo.platform, // 系统类型（ios/android/devtools）
				osVersion: systemInfo.system, // 系统版本（如 iOS 16.0、Android 13）
				model: systemInfo.model, // 设备型号（如 iPhone 14、Xiaomi 13）
				brand: systemInfo.brand, // 设备品牌（如 Apple、Xiaomi、Huawei）
				devicePixelRatio: systemInfo.pixelRatio, // 设备像素比（如 2、3）

				// 屏幕信息
				screenWidth: systemInfo.screenWidth, // 屏幕总宽度（px，如 375、414）
				screenHeight: systemInfo.screenHeight, // 屏幕总高度（px，如 812、932）
				windowWidth: systemInfo.windowWidth, // 可使用窗口宽度（px，不含导航栏/状态栏）
				windowHeight: systemInfo.windowHeight, // 可使用窗口高度（px）

				// 状态栏/导航栏相关（适配自定义导航栏）
				statusBarHeight: systemInfo.statusBarHeight, // 状态栏高度（px，如 44、24）
				navBarHeight: 0, // 导航栏高度（默认 44px，可结合胶囊计算）

				// 小程序/App 特有信息
				appVersion: systemInfo.version, // 微信小程序基础库版本（如 2.30.0）/ App 版本
				wxVersion: systemInfo.wxVersion, // 微信客户端版本（仅小程序有效）
				isDevTools: systemInfo.platform === "devtools", // 是否为开发者工具
			};

			// 额外：计算导航栏高度（适配 App 和小程序，结合胶囊信息）
			try {
				// 获取胶囊信息（仅 App/小程序有效，H5 端会报错，已被外层 try-catch 捕获）
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				if (menuButtonInfo && menuButtonInfo.bottom) {
					// 导航栏高度 = 胶囊底部距离顶部 + 胶囊顶部到状态栏底部的距离
					deviceInfo.navBarHeight = menuButtonInfo.bottom + (menuButtonInfo.top - deviceInfo.statusBarHeight);
				} else {
					// 异常时设置默认导航栏高度（44px 适配大部分设备）
					deviceInfo.navBarHeight = deviceInfo.platform === "ios" ? 44 : 48;
				}
			} catch (e) {
				// H5 端或异常场景，设置默认值
				deviceInfo.navBarHeight = deviceInfo.platform === "ios" ? 44 : 48;
			}
			Object.assign(data, deviceInfo)
		} catch (e) {
			// 极端异常（如设备权限限制），返回默认值
			console.warn("获取设备信息失败：", e);
			Object.assign(data, {
				platform: "",
				osVersion: "",
				model: "",
				brand: "",
				devicePixelRatio: 2,
				screenWidth: 375,
				screenHeight: 812,
				windowWidth: 375,
				windowHeight: 700,
				statusBarHeight: 44,
				navBarHeight: 44,
				appVersion: "",
				wxVersion: "",
				isDevTools: false,
			});
		}
	});

	/**
	 * @description 用户点击右上角 “转发” 或页面中调用 wx.showShareMenu() 后触发（小程序）
	 */
	onShareAppMessage(() => {
		return false;
	});

	/**
	 * @description 用户点击物理返回键或导航栏返回按钮时（H5 或部分小程序支持）
	 */
	onBackPress((e) => {
		// backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
		if (e.from === "backbutton") {
			// 返回 true 可阻止默认返回行为
			// return true; // 一级页面阻止返回，其它不阻止
		}
	});
</script>

<template>
	<!-- 自定义导航栏（必须放在页面最顶部） -->
	<CustomNavbar ref="CustomNavbarRef" :backIconShow="true" :title="'设备信息'"></CustomNavbar>

	<view class="test-container" :style="'padding-top: ' + CustomNavbarHeight + 'px'">
		<text class="test-item-tit">
			基础信息
		</text>
		<view class="test-item">
			<text class="test-item-lable">系统类型（ios/android/devtools）</text>
			<text class="test-item-value">{{data?.platform ? data?.platform : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">系统版本（如 iOS 16.0、Android 13）</text>
			<text class="test-item-value">{{data?.osVersion ? data?.osVersion : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">设备型号（如 iPhone 14、Xiaomi 13）</text>
			<text class="test-item-value">{{data?.model ? data?.model : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">设备品牌（如 Apple、Xiaomi、Huawei）</text>
			<text class="test-item-value">{{data?.brand ? data?.brand : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">设备像素比（如 2、3）</text>
			<text class="test-item-value">{{data?.devicePixelRatio ? data?.devicePixelRatio : "无法获取"}}</text>
		</view>

		<text class="test-item-tit">
			屏幕信息
		</text>
		<view class="test-item">
			<text class="test-item-lable">屏幕总宽度（px，如 375、414）</text>
			<text class="test-item-value">{{data?.screenWidth ? data?.screenWidth : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">屏幕总高度（px，如 812、932）</text>
			<text class="test-item-value">{{data?.screenHeight ? data?.screenHeight : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">可使用窗口宽度（px，不含导航栏/状态栏）</text>
			<text class="test-item-value">{{data?.windowWidth ? data?.windowWidth : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">可使用窗口高度（px）</text>
			<text class="test-item-value">{{data?.windowHeight ? data?.windowHeight : "无法获取"}}</text>
		</view>

		<text class="test-item-tit">
			状态栏/导航栏相关（适配自定义导航栏）
		</text>
		<view class="test-item">
			<text class="test-item-lable">状态栏高度（px，如 44、24）</text>
			<text class="test-item-value">{{data?.statusBarHeight ? data?.statusBarHeight : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">导航栏高度（默认 44px，可结合胶囊计算）</text>
			<text class="test-item-value">{{data?.navBarHeight ? data?.navBarHeight : "无法获取"}}</text>
		</view>

		<text class="test-item-tit">
			小程序/App 特有信息
		</text>
		<view class="test-item">
			<text class="test-item-lable">微信小程序基础库版本（如 2.30.0）/ App 版本</text>
			<text class="test-item-value">{{data?.appVersion ? data?.appVersion : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">微信客户端版本（仅小程序有效）</text>
			<text class="test-item-value">{{data?.wxVersion ? data?.wxVersion : "无法获取"}}</text>
		</view>
		<view class="test-item">
			<text class="test-item-lable">是否为开发者工具</text>
			<text class="test-item-value">{{data?.isDevTools ? data?.isDevTools : "无法获取"}}</text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import "./test.scss";
</style>